<template>
	<div class="login-container">
		<el-form 
			ref="loginForm" 
			v-bind:model="loginParams" 
			v-bind:rules="loginRules" 
			class="login-form" 
			auto-complete="on" 
			label-position="left">
			<!-- logo and title -->
			<div class="title-container">
				<img src="./../../assets/imgs/i2-logo.png" alt="" />
				<h3 class="title">艾融软件</h3>
			</div>
			<!-- username -->
			<el-form-item prop="username">
				<span class="svg-container">
					<!-- <svg-icon icon-class="user" /> -->
				</span>
				<el-input
					ref="username"
					v-model="loginParams.username"
					placeholder="Username"
					name="username"
					type="text"
					tabindex="1"
					auto-complete="on"/>
			</el-form-item>
			<!-- password -->
			<el-form-item prop="password">
				<span class="svg-container">
					<!-- <svg-icon icon-class="password" /> -->
				</span>
				<el-input
					v-bind:key="passwordType"
					ref="password"
					v-model="loginParams.password"
					v-bind:type="passwordType"
					placeholder="Password"
					name="password"
					tabindex="2"
					auto-complete="on"
					v-on:keyup.enter.native="handleLogin" />
				<span class="show-pwd" @click="showPwd">
					<!-- <svg-icon v-ion:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> -->
				</span>
			</el-form-item>
			<el-button 				
				type="primary" 
				style="width:100%;margin-bottom:15px;" 
				v-on:click.native.prevent="handleLogin">登 录</el-button>
			 <div class="tips">
				<el-button 
					type="text" 
					size="small">忘记密码</el-button>			
				<el-button
					type="text" 
					size="small"
					v-on:click="handleToRegister">
					立即注册
				</el-button>
				<el-button
					type="text" 
					size="small"
					v-on:click="getTodos">
					获取数据
				</el-button>

			</div>	
		</el-form>
	</div>
</template>

<script type="text/javascript">

	import userService from "./../../services/user"
	import axios from "./../../utils/request"
	import { tokenKey } from "./../../utils/constants"
	
	export default {
		name: 'Login',
		data() {			
			return {
				loginParams: {
					username: 'admin',
					password: '123456'
				},
				loginRules: {
					username: [{ required: true, trigger: 'blur'}],
					password: [{ required: true, trigger: 'blur'}]
				},
				loading: false,
				passwordType: 'password',
				redirect: undefined
			}
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		methods: {
			showPwd() {
				if (this.passwordType === 'password') {
					this.passwordType = ''
				} else {
					this.passwordType = 'password'
				}
				this.$nextTick(() => {
					this.$refs.password.focus()
				})
			},
			handleLogin() {
				this.$refs.loginForm.validate(async valid => {					
					
					if (valid) {
						let response=await userService.login(this.loginParams);
						if(response.data.state){
							let user=response.data.data;
							// age: 25
							// birthDay: null
							// id: 10086
							// password: null
							// realName: "戴瑞"
							// registerDate: null
							// sex: "女"
							// token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhdXRoMCIsImlkIjoxMDA4NiwiZXhwIjoxNjQ5ODgzMDQ5LCJ1c2VybmFtZSI6ImFkbWluIn0.TWmT0wfHdyaGQXFb2E3rVyMva6upRagvbLMo6V6nEuQ"
							// username: "admin"
							window.localStorage.setItem(tokenKey,user.token);

							//可以使用mapActions辅助函数映射action到methods,我这里写的比较简化，带命名空间条用action
							this.$store.dispatch("user/getUser",user);

							//跳转页面
							this.$router.push("/");
						}					
					} else {
						console.log('error submit!!')
						return false;
					}
				})
			},
			handleForgetPassword(){
				console.log("forget");
			},
			handleToRegister(){
				this.$router.push("register");
			},
			getTodos(){
				axios.get("todo/getAllTodos").then(function (response) {
					console.log(response);
				}).catch(function (error) {
					console.log(error);
				});
			}
		}
	}
</script>

<style type="text/css">
	.login-form {
		position: relative;
		width: 520px;
		padding: 160px 35px 0;
		margin: 0 auto;
		overflow: hidden;
	}
	.title-container {
		position: relative;
	}
	.title-container img{
		position: absolute;	top:-8px; left: 112px;
	}
	.title-container .title {
		font-size: 26px;			
		margin: 0px auto 40px auto;
		text-align: center;
		font-weight: bold;
	}
</style>
